import { NavBar, DatePicker } from 'antd-mobile'
import './index.scss'
import { useEffect, useMemo, useState } from 'react'
import classNames from 'classnames'
import dayjs from 'dayjs'
import { useSelector } from 'react-redux'
import _ from 'lodash'
import DailyBill from './components/dayBill'

const Month = () => {
  // 按月对数据进行处理
  const billList = useSelector((state) => state.bill.billList)
  const billListGroup = useMemo(() => {
    return _.groupBy(billList, (item) => dayjs(item.date).format('YYYY-MM'))
  }, [billList])
  // 控制日期选择框的显示和隐藏
  const [dateVisible, setDateVisible] = useState(false)
  // 控制当前日期显示
  const [currentDate, setCurrentDate] = useState(new Date())
  // 保存当前月份数据
  const [billListMonth, setBillListMonth] = useState([])
  // 点击日期选择框的确认按钮
  const onConfirm = (e) => {
    // 保存当前日期
    setCurrentDate(e)
    // 保存当前日期相应数据
    setBillListMonth(billListGroup[dayjs(e).format('YYYY-MM')])
  }
  // 处理数据
  const monthResult = useMemo(() => {
    const pay = billListMonth?.filter(item => item.type === 'pay').reduce((sum, item) => sum + item.money, 0)
    const income = billListMonth?.filter(item => item.type === 'income').reduce((sum, item) => sum + item.money, 0)
    return {
      pay,
      income,
      total: pay + income
    }
  }, [billListMonth])
  // 初始化显示当前数据
  useEffect(() => {
    if (billListGroup[dayjs().format('YYYY-MM')]) {
      setBillListMonth(billListGroup[dayjs().format('YYYY-MM')])
    }
  }, [billListGroup])
  // 按日处理当前数据
  const billListDayGroup = useMemo(() => {
    const billListDay = _.groupBy(billListMonth, (item) => dayjs(item.date).format('YYYY-MM-DD'))
    return {
      billListDay,
      keys: Object.keys(billListDay)
    }
  }, [billListMonth])
  return (
    <div className="monthlyBill">
      <NavBar className="nav" backArrow={false}>
        月度收支
      </NavBar>
      <div className="content">
        <div className="header">
          {/* 时间切换区域 */}
          <div className="date" onClick={() => setDateVisible(true)}>
            <span className="text">
              {dayjs(currentDate).format('YYYY')} | {dayjs(currentDate).format('M')}月账单
            </span>
            <span className={classNames('arrow', dateVisible && 'expand')}></span>
          </div>
          {/* 统计区域 */}
          <div className='twoLineOverview'>
            <div className="item">
              <span className="money">{monthResult?.pay?.toFixed(2)}</span>
              <span className="type">支出</span>
            </div>
            <div className="item">
              <span className="money">{monthResult?.income?.toFixed(2)}</span>
              <span className="type">收入</span>
            </div>
            <div className="item">
              <span className="money">{monthResult?.total?.toFixed(2)}</span>
              <span className="type">结余</span>
            </div>
          </div>
          {/* 时间选择器 */}
          <DatePicker
            className="kaDate"
            title="记账日期"
            precision="month"
            visible={dateVisible}
            onClose={() => setDateVisible(false)}
            onConfirm={onConfirm}
            max={new Date()}
          />
        </div>
        {billListDayGroup.keys.map((item) => {
          return <DailyBill key={item} date={item} billList={billListDayGroup.billListDay[item]} />
        })}
      </div>
    </div >
  )
}

export default Month